<template>
    <div id="up1">
      <h2>保温车
        
      </h2>
      <!-- <el-date-picker
        clearable
        v-model="yzjTime"
        type="date"
        value-format="yyyy-MM-dd"
        placeholder="请选择测试时间"
        style="margin-left: 20px"
      >
      </el-date-picker> -->
      <!-- <el-button
        type="primary"
        icon="el-icon-search"
        size="mini"
        @click="handleQuery"
        style="margin-left: 20px"
        >搜索</el-button
      > -->
      <div class="app-container1" style="margin-top: -50px">
        <h1>关键数据</h1>
        <el-table
          vv-loading="loading"
          :data="tableData"
          border
          :cell-style="color1"
          :header-cell-style="{ background: '#409eff', color: '#ffffff' }"
        >
          <!-- <el-table-column
            label="生产数量(个)"
            align="center"
            prop="consumptionAll"
          /> -->
          <el-table-column label="当前电流(A)" align="center" prop="i" />
          <el-table-column label="当前电压(V)" align="center" prop="v" />
          <el-table-column
            label="当前功耗(W)"
            align="center"
            prop="consumptionNow"
          />
          <el-table-column
            label="总能耗(KWH)"
            align="center"
            prop="consumptionAll"
          />
          <el-table-column label="运行状态" align="center" prop="state" />
        </el-table>
      </div>
      <el-date-picker
        clearable
        v-model="yzjTime"
        type="date"
        value-format="yyyy-MM-dd"
        placeholder="请选择测试时间"
        style="margin-left: 30px"
      >
      </el-date-picker>
      <el-button
        type="primary"
        icon="el-icon-search"
        size="mini"
        @click="handleQuery"
        style="margin-left: 20px"
        >搜索</el-button
      >
      <div class="proCharts" ref="echarts"></div>
    </div>
  </template>
  
  <script>
  import * as echarts from "echarts";
  import { yzjLine, yzjgetData } from "@/api/system/zdsx.js";
  import axios from "axios";
  export default {
    data() {
      return {
        loading: false,
        tableData: [],
        yzjTime: "",
        list: {
          name: "anuo",
          title: "Mr Olympia",
        },
      };
    },
    created() {
      this.yzjgetDataFn();
    },
    mounted() {
      this.getOilList();
      let a = { name: "lee" };
      let b = { age: 18 };
      Object.defineProperty(b, "name", {
        value: a.name,
      });
      console.log(a, b, 222);
    },
    methods: {
      yzjgetDataFn() {
        yzjgetData().then((res) => {
          console.log(res.data);
          this.tableData = res.data;
        });
      },
      getOilList() {
        this.loading = true;
        yzjLine(this.yzjTime).then((res) => {
          const option = {
            xAxis: {
              data: res.data[0][1],
            },
            yAxis: {
              type: "value",
            },
            legend: {
              data: ["一号电流", "一号电压", "二号电流", "二号电压"],
            },
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "cross",
                label: {
                  backgroundColor: "#6a7985",
                },
              },
            },
            series: [
              {
                name: "一号电流",
                data: res.data[0][0],
                type: "line",
              },
              {
                name: "一号电压",
                data: res.data[0][2],
                type: "line",
              },
              {
                name: "二号电流",
                data: res.data[1][0],
                type: "line",
              },
              {
                name: "二号电压",
                data: res.data[1][2],
                type: "line",
              },
            ],
          };
          const E = echarts.init(this.$refs.echarts);
          E.setOption(option);
        });
      },
      handleQuery() {
        this.getOilList();
        // console.log(1111111)
      },
    },
  };
  </script>
  
  <style>
  .proCharts {
    width: 100%;
    height: 600px;
    /* margin-top: -300px; */
  }
  h2 {
    font-size: 35px;
    text-align: center;
    color: #0072c6;
  }
  </style>
  